/*
 * @Description:
 * @Author: LCL
 * @Date: 2021-11-29
 * @LastEditors: LCL
 * @LastEditTime: 2021-12-02
 * @FilePath: /beff/src/components/drag/FrontEndEvent/insertItem.tsx
 */
import React from 'react';
import type { FormItemProps, InputProps } from 'antd';
import { Form, Input, Tooltip } from 'antd';
import styles from './index.less';
import { useInputCursor } from './useInputCursor';
import type { Options } from './ResultModal';
import type { TextAreaProps } from 'antd/lib/input';

interface IInsertPorps {
  options: Options[];
  configProps: FormItemProps;
  type: 'input' | 'textarea';
  inputProps?: InputProps;
  textareaProps?: TextAreaProps;
}

const InsertItem: React.FC<IInsertPorps> = (props) => {
  console.log('我是insert');
  const { setRef, insertAt, getCursorPos } = useInputCursor();
  // const optionsObj = {};
  // props.options.forEach((item) => {
  //   optionsObj[item.value] = item.label;
  // });
  const getInsertDom = () => {
    let dom = <span style={{ color: '#000' }}>当前数据为空</span>;
    if (props.options && props.options.length) {
      const list = props.options.map((item) => {
        return (
          <li
            className={styles.menuItem}
            key={item.value}
            onClick={() => {
              console.log(item.value);
              // if (!actionRely.includes(item.value)) {
              //   actionRely.push(item.value);
              //   setActionRely([...actionRely]);
              // }

              insertAt(getCursorPos().end, item.value);
            }}
          >
            {item.label}
          </li>
        );
      });
      dom = <ul className={styles.menu}>{list}</ul>;
    }
    return dom;
  };
  return (
    <>
      <div style={{ position: 'relative' }}>
        <Form.Item {...props.configProps}>
          {/* <div contentEditable={true}>dsfsdf</div> */}
          {props.type === 'input' ? (
            <Input ref={setRef} {...props.inputProps} />
          ) : (
            <Input.TextArea ref={setRef} {...props.textareaProps} />
          )}
        </Form.Item>
        <Tooltip title={getInsertDom()} trigger="click" color="#fff">
          {props.children}
        </Tooltip>
      </div>
    </>
  );
};

export default InsertItem;
